<template>
  <div class="home">
    <!-- <h2 @click="toPlayerRoute">点击跳转到播放页面</h2> -->
    <el-card shadow="always">
      <!-- 二级导航 -->
      <div class="subnav">
        <div class="w">
          <router-link
            v-for="(item, index) in $router.options.routes[0].children[0]
              .children"
            :key="index"
            :to="item.path"
            exact-active-class="subLink-active"
          >
            <span v-if="item.meta.title">
              {{ item.meta.title }}
            </span>
          </router-link>
        </div>
      </div>
    </el-card>
    <transition name="el-fade-in-linear" mode="out-in">
      <router-view></router-view>
    </transition>
    <el-backtop :bottom="100">
      <div
        style="
           {
            height: 100%;
            width: 100%;
            background-color: #f2f5f6;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
            text-align: center;
            line-height: 40px;
            color: #1989fa;
            border-radius: 50%;
          }
        "
      >
        <i class="el-icon-caret-top"></i>
      </div>
    </el-backtop>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      id: 167876,
      // id: 536570451,
    };
  },

  created() {
    // console.log(this.$router.options.routes);
  },
  methods: {
    toPlayerRoute() {
      // if (localStorage.getItem("open")) {
      //   // 有值 说明已经打开了一个页面

      //   // open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
      //   // 关键是 第二个参数 player，这个是窗口名称 ， 同一个窗口 ，只允许打开一次 不允许出现多个
      //   // window.open("http://localhost:8080/#/player", "player");
      // } else {
      //   // 无值，所有没用打开页面
      //   let link = this.$router.resolve({
      //     path: "/player/", //要跳转的路由
      //   });
      //   window.open(link.href, "player"); //打开新窗口
      //   localStorage.setItem("open", true);
      // }

      // 新版本
      if (sessionStorage.getItem("open")) {
        // 打开了 窗口
        this.id++;
        let link = this.$router.resolve({
          path: `/player/${this.id}`, //要跳转的路由
        });
        window.open(link.href, "player"); //打开新窗口
      } else {
        // 没用打开 player 窗口
        let link = this.$router.resolve({
          path: `/player/${this.id}`, //要跳转的路由
        });
        window.open(link.href, "player"); //打开新窗口
        sessionStorage.setItem("open", true);
      }
    },
  },

  computed: {},
};
</script>

<style lang="less" scoped>
.subLink-active {
  color: @globalColor !important;
}
// 覆盖样式
/deep/ .el-card {
  border: none;
  box-shadow: 0 6px 12px 0 rgb(0 0 0 e("/") 10%);
}
/deep/ .el-icon-caret-top {
  color: @globalColor;
}
.subnav {
  display: flex;
  align-items: center;
  // justify-content: center;
  height: 50px;
  // text-align: center;
  font-size: 16px;
  color: #000000;
  a {
    color: #000000;
    margin-left: 40px;
  }
}
</style>
